<template>
  <el-row v-if="loaded">
    <el-col :span="12">
      <el-form label-position="left" inline class="table-expand" style="padding-left: 20px">
        <template v-for="(v, k) in detail()" v-if="config[k]">
          <el-form-item :label="m(k)" v-if="show(v, config[k].type)">
            <template>
              <TableField
                :row="config[k]"
                :value="v"
                :data="data"/>
            </template>
          </el-form-item>
          
          <br v-if="config[k].type != 'hidden'"/>
        </template>
      </el-form>
    </el-col>
    <el-col :span="12">
      <el-form label-position="left" inline class="table-expand">
          <el-form-item :label="m('staff')">
            <span>{{transform(data.staffId, 'organizationStaffSource')}}</span>
          </el-form-item>
          <br/>
          <el-form-item :label="m('station')">
            <span>{{transform(data.stationId, 'organizationStationSource')}}</span>
          </el-form-item>
          <br/>
          <el-form-item :label="m('department')">
            <span>{{transform(data.departmentId, 'organizationDepartmentSource')}}</span>
          </el-form-item>
          <br/>
          <el-form-item :label="m('apply_date')">
            <span>{{data.applyDate}}</span>
          </el-form-item>
          <br/>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>

import axios from 'axios'
import * as constant from '@/store/yg/common/constant'
import {m} from "@/store/yg/common/local"
import { untransform } from '@/store/yg/common/uri'
import TableField from "@/components/yg/layout/main/page/wrapper/table/Field.vue"

export default {
  components: {
    TableField,
  },
  data() {
    return {
      loaded: false,
      config: {},
    }
  },
  props: [
  　　'row', 'data', 'more'
　],
  computed: {
    uri() {
      return untransform(this.$route.params.uri);
    },
  },
  methods: {
    show(value, type) {
      if (type == 'hidden') {
        return false;
      }
      if (type == 'images') {
        if (( ! value) || ! value.length) {
          return false;
        }
      }
      if (type == 'table') {
      }
      return true;
    },
    m(k) {
      return m(k, true);
    },
    validate(action) {
      return true;
    },
    callbefore(action) {
    },
    callafter(action) {
    },
    detail() {
      return JSON.parse(this.data.source);
    },
    transform(id, source) {
      var sources = this.$store.state.main.entry.sources;
      var options = sources[source];
      
      return options[id] ? options[id] : '';
    },
    loadTemplate(templateId) {
      var uri = '/api/consume/load?uri=' + this.uri + '&f=findTemplate' + '&id=' + templateId;

      if (localStorage['workflow_' + this.uri] && false) {
        this.config = JSON.parse(localStorage['workflow_' + this.uri]);
        this.loaded = true;
        return;
      }
      return new Promise((resolve, reject) => {
        axios({
          method: 'post',
          url: constant.API_SERVER + uri
        }).then(response => {
          if (response.data && response.data.source) {
            var data = JSON.parse(response.data.source);
            for (var i in data) {
              var row = data[i];
              var view = row.view ? row.view : '';
              this.config[row.name] = {type: view};
            }
            localStorage['workflow_' + this.uri] = JSON.stringify(this.config);
            resolve(this.config);
          }
          this.loaded = true;
        }).catch(error => {
          reject(error);
        });
      });
    },
  },
  mounted() {
    this.loadTemplate(this.data.templateId);
  }
}
</script>

<style>
  .table-expand {
    font-size: 0;
  }
  .table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>